<template>
	<div class="notice">
		<div class="banner"></div>
		<div class="tab-box">
			<div class="tab-wrap">
				<div class="tab-menu">
					<div class="tab-item active">通知公告</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="content-wrap">
				<div class="notice-item" v-for="(item, index) in noticeList" :key="index">
					<i class="dot"></i>
					<div class="title">{{ item.title }}</div>
					<div class="date">{{ item.date }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Notice',
	data() { 
		return {
			//公告通知列表
			noticeList: []
		}
	},
	mounted() { 
		this.queryDatas();
	},
	methods: {
		/**
		 * 查询数据
		 */
		queryDatas() { 
			let noticeList = [
				{ id: 1, title: '关于资产管理系统升级优化的通知', date: '2025-01-13' },
				{ id: 2, title: '关于国家自然科学基金项目结题有关事项的通知', date: '2025-01-13' },
				{ id: 3, title: '关于举办合肥工业大学第三届化工短视频大赛暨2025年全国大学生化工短视频大赛校内选拔赛的通知', date: '2025-01-13' },
				{ id: 4, title: '关于2025年度国家自然科学基金项目申请的通知', date: '2025-01-13' },
				{ id: 5, title: '关于举办合肥工业大学第三届化工短视频大赛暨2025年全国大学生化工短视频大赛校内选拔赛的通知', date: '2025-01-13' },
				{ id: 6, title: '关于资产管理系统升级优化的通知', date: '2025-01-13' },
				{ id: 7, title: '关于举办合肥工业大学第三届化工短视频大赛暨2025年全国大学生化工短视频大赛校内选拔赛的通知', date: '2025-01-13' },
				{ id: 8, title: '关于2025年度国家自然科学基金项目申请的通知', date: '2025-01-13' },
				{ id: 9, title: '关于举办合肥工业大学第三届化工短视频大赛暨2025年全国大学生化工短视频大赛校内选拔赛的通知', date: '2025-01-13' },
				{ id: 10, title: '关于国家自然科学基金项目结题有关事项的通知', date: '2025-01-13' }
			];
			this.noticeList = noticeList;
		}
	}
}
</script>

<style lang="scss" scoped>
.notice {
	width: 100%;
	min-height: 760px;
	.banner {
		width: 100%;
		height: 140px;
		background-image: url('~@/assets/images/list-banner.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: -100px;
	}
	.tab-box {
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		.tab-wrap {
			display: flex;
			width: 1460px;
			height: 100%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.tab-menu {
			display: flex;
			height: 100%;
			flex-direction: row;
			align-items: center;
			.tab-item {
				display: flex;
				font-size: 18px;
				font-weight: bold;
				width: 150px;
				text-align: center;
				transition: all .2s;
				cursor: pointer;
				letter-spacing: 2px;
				&.active {
					color: #a6292f;
					font-size: 20px;
				}
			}
		}
	}
	.tab-content {
		width: 100%;
		background: rgba(255,255,255, .9);
		.content-wrap {
			width: 1460px;
			margin: 0 auto;
			padding: 30px 0 50px 0;
		}
		.notice-item {
			display: flex;
			flex-direction: row;
			align-items:center;
			height: 48px;
			cursor: pointer;
			transition: all .2s;
			&:hover {
				box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.3);
				background-color: #fff;
				padding: 0 10px;
			}
			.dot {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #333;
				margin-right: 10px;
			}
			.title {
				flex: 1;
			}
			.date {
				font-size: 14px;
				color: #999;
			}
		}
	}
}
</style>